<default-header class="top-header"></default-header>
<div class="wrap no-sidebar">
  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
    <navbar-utility-mobile></navbar-utility-mobile>
  </div>
  <div class="middle">
    <!-- Middle section -->
    <div class="middle-section surface-shaded">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-content">
          <div class="container surface-shaded">
            <div class="row">
              <div class="col-md-12">
                <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
                <div class="osc-form">
                  <div class="row">
                    <div class="col-md-2 template-name gutter-top hidden-sm hidden-xs">
                      <span class="fa fa-cubes"></span>
                    </div>
                    <div class="col-md-9">
                      <fieldset ng-disabled="disableInputs">
                        <alerts alerts="alerts"></alerts>
                        <osc-image-summary resource="template"></osc-image-summary>
                        <div ng-if="templateImages.length" class="images">
                          <h2>Images</h2>
                          <ul class="list-unstyled" ng-repeat="image in templateImages">
                            <li>
                              <i class="pficon pficon-image" aria-hidden="true"></i>
                              <span class="name">{{ image.name }}</span>
                            </li>
                          </ul>
                        </div>
                        <form name="templateForm">
                          <template-options parameters="template.parameters" expand="true" can-toggle="false"></template-options>
                          <label-editor
                              labels="labels"
                              expand="true"
                              can-toggle="false"
                              help-text="Each label is applied to each created resource.">
                          </label-editor>
                          <div class="buttons gutter-top-bottom">
                            <button class="btn btn-primary btn-lg" ng-click="createFromTemplate()" ng-disabled="templateForm.$invalid || disableInputs">Create</button>
                            <a class="btn btn-default btn-lg" href="{{projectName | projectOverviewURL}}">Cancel</a>
                          </div>
                        </form>
                      </fieldset>
                    </div>
                  </div>
                  <div ng-hide="template">
                    {{ emptyMessage }}
                  </div>
                </div><!-- /osc-form -->
              </div><!-- /col-* -->
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
